<template>
  <div >
      <el-table :data="tableData.filter(data => !search ||
      data.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%" height="250">
        <el-table-column
            label="编号"
            prop="id">
        </el-table-column>
        <el-table-column
            label="姓名"
            prop="name">
        </el-table-column>
        <el-table-column
            label="工资"
            prop="salary">
        </el-table-column>
        <el-table-column
            label="年龄"
            prop="age">
        </el-table-column>
        <el-table-column
            align="right">
          <template slot="header">
            <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="scope">

            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">修改
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <p>
        <el-button
            size="mini"
            type="danger"
            @click="handleAdd()">添加
        </el-button>
      </p>
    </div>


</template>

<script>
export default {
  name: 'ems',
  // created() {
  //   let tableData_json1 = localStorage.getItem('tableData_json')
  //   //反序列化为对象
  //   let tableData = JSON.parse(tableData_json1)
  // },
  data() {
    return {
      id: localStorage.getItem('id'),
      tableData:JSON.parse(localStorage.getItem('tableData_json')),

      search: '',

    }
  },
  methods: {
    handleEdit(index, row) {
      this.$router.push({
        name: 'Update',
        query: {
          name:row.name,
          salary:row.salary,
          age:row.age,
          id:row.id,
          // row:row,
          index:index
        },
      })
      console.log(index, row);
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1)
      let tableData_json = JSON.stringify(this.tableData)
      localStorage.setItem('tableData_json',tableData_json)
      console.log(index, row);
    },
    handleAdd() {
      // this.id++
      localStorage.setItem('id',this.id)
      let tableData_json = JSON.stringify(this.tableData)
      localStorage.setItem('tableData_json',tableData_json)
      this.$router.push({
        name: 'Add',
        params: {
          id: this.id,
        },
      })
    },

  },
  // mounted() {

    // if (this.isadd === true) {
    //   this.id++
    //   this.tableData.push({
    //     id: this.id,
    //     name: this.addUsername,
    //     salary: this.addSalary,
    //     age: this.addAge
    //   })
    //   this.isadd === false

    // }
  // }
}
</script>
<style scoped>
@import url("css/style.css");
@import url("css/style.css.bak");
</style>